import React, { useState } from 'react'
import ModalCss from './modal.module.scss'
// import { useTranslation } from 'react-i18next';
import formCSS from './submitForm.module.scss'

import SubmitForm from './SubmitForm'



const Modal = ({ closeModal }) => {
    // const { t } = useTranslation();
    const [submit, setSubmit] = useState(false)
    const preventPropagation = (e) => {
        e.stopPropagation()
    }

    const successCallback = () => {
        setSubmit(true)
    }
    
    return (
        <div className={ModalCss.wrap} onClick={closeModal}>
            <div className={ModalCss.center} onClick={preventPropagation}>
                <section className={ModalCss.modalHeader}>
                    <span  onClick={closeModal}>X</span>
                </section>
                
                
                {(() => {
                    if (!submit) {
                        return <>
                                    <h2>Request an invite</h2>
                                    <SubmitForm sucessCallback={successCallback}/>
                                </>
                            
                        
                            
                    } else {
                        return <div className={ModalCss.successBox}>
                                    <h2>All Done</h2>
                                    <br/>
                                    <h3>You will be one of the first to experience Broccoli & Co. when we launch.</h3>
                                    <section className={formCSS.formSection}>
                                        <div className={formCSS.formSubmitButton}
                                        onClick={closeModal}
                                        >ok</div>
                                    </section>
                                </div>
                        
                        
                    }
                })()}
                
            </div>
        </div>
    )
}

export default Modal